<template>
  <div class="box">
    <div class="br-swiper" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
      <img v-for="(item) in imgs" :src="item.image||item" class="img-swiper" @load="imageLoaded">
    </div>
    <div class="indicator" >
      <div v-for="(item,index) in slideCount" class="indi-item" @click="indiClick(index)" :class="{active: index === currentIndex-1}"></div>
    </div>
  </div>

</template>

<script>
  export default {
    name: "Swiper",
    props:{
      imgs:{type:Array,default: []},
      animDuration:{type:Number,default: 500},
      interval: {ype: Number, default: 3000},
      moveRatio:{type:Number,default:0.25},
    },
    data(){
      return{
        imgsLenth:0,
        brSwiperStyl:{},
        slideCount:0,
        imgWidth:0,
        currentIndex:1,
        sliding:true,
        isLoaded:false
      }
    },
    mounted() {
      setTimeout(()=>{
        this.handleDom()
        this.startTimer()
      },2000)
    },
    methods:{
      imageLoaded(){
        if(!this.isLoaded){
          this.isLoaded = true
          this.$emit('swiperLoaded')
        }
      },
      touchStart: function (e) {
        if(this.sliding === true){return}
        this.stopTimer()
        this.startX = e.touches[0].pageX
      },
      touchMove: function (e) {
        this.currentX = e.touches[0].pageX;
        this.distance = this.currentX - this.startX;
        let currentPosition = -this.currentIndex * this.imgWidth;
        let moveDistance = this.distance + currentPosition;
        this.setTransform(moveDistance);
      },
      touchEnd: function (e) {
        // 1.获取移动的距离
        let currentMove = Math.abs(this.distance);

        // 2.判断最终的距离
        if (this.distance === 0) {
          return
        } else if (this.distance > 0 && currentMove > this.imgWidth * this.moveRatio) { // 右边移动超过0.5
          this.currentIndex--
        } else if (this.distance < 0 && currentMove > this.imgWidth * this.moveRatio) { // 向左移动超过0.5
          this.currentIndex++
        }

        // 3.移动到正确的位置
        this.scrollContent(-this.currentIndex * this.imgWidth,this.animDuration);
        this.positionAdjust()
        // 4.移动完成后重新开启定时器
        this.startTimer();
      },
      indiClick(index){
        this.stopTimer()
        this.currentIndex = index+1
        this.setTransform(-this.currentIndex * this.imgWidth)
        this.startTimer()
      },
      setTransform(position,speed=0) {
        this.brSwiperStyl.transition = speed + 'ms';
        this.brSwiperStyl.transform = `translate3d(${position}px, 0, 0)`;
      },
      scrollContent(position,speed) {
        this.sliding = true
        this.brSwiperStyl.transition = speed + 'ms';
        this.brSwiperStyl.transform = `translate3d(${position}px, 0, 0)`;
        this.sliding = false
      },
      positionAdjust() {
        setTimeout(() => {
          // 1.校验正确的位置
          if (this.currentIndex === this.slideCount+1) {
            this.currentIndex = 1;
            this.setTransform(-this.currentIndex * this.imgWidth);
          }
        }, this.animDuration)
      },
      handleDom(){
        let swiperEl = document.querySelector('.br-swiper')
        let swiperEls = swiperEl.getElementsByClassName('img-swiper')
        this.slideCount = swiperEls.length
        let cloneFirst = swiperEls[0].cloneNode(true)
        let cloneLast = swiperEls[this.slideCount - 1].cloneNode(true)
        swiperEl.insertBefore(cloneLast,swiperEls[0])
        swiperEl.appendChild(cloneFirst)
        this.imgWidth = swiperEl.offsetWidth
        this.brSwiperStyl = swiperEl.style
        this.setTransform(-this.imgWidth)
      },
      startTimer(){
        this.timer = setInterval(()=>{
          this.currentIndex += 1
          this.scrollContent(-this.imgWidth*this.currentIndex,this.animDuration)
          this.positionAdjust()
        },this.interval)
      },
      stopTimer(){
        clearInterval(this.timer)
      }

    }


  }
</script>

<style scoped>
  .box{
    overflow: hidden;
    position: relative;
  }
  .br-swiper{
    display: flex;
  }
  .img-swiper{
    width: 100%;
  }
  .indicator{
    width: 100%;
    display: flex;
    bottom: 8px;
    position: absolute;
    justify-content: center;
  }
  .indi-item {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: #fff;
    margin-right: 10px;
  }
  .indicator .active{
    background-color: red;
  }
</style>